<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="decrement">-</button>
  <span id="count">0</span>
  <button id="increment">+</button>
  <script src="https://cdn.bootcdn.net/ajax/libs/redux/4.2.0/redux.min.js"></script>
  <script>
    // 1. 定义 reducer 函数
    // 作用：根据不同的 action 对象，返回不同的新的 state
    // state：管理数据的初始状态
    // action：对象，type 属性标记当前想要做什么样的修改
    function reducer (state = { count: 0 }, action) {
      if (action.type === 'INCREMENT') { 
        return {
          count: state.count + 1
        }
      } else if (action.type === 'DECREMENT') {
        return {
          count: state.count - 1
        }
      }
      return state
    }

    // 2. 使用 reducer 函数生成 store 实例
    const store = Redux.createStore(reducer)

    const countEle = document.getElementById('count')

    // 3. 通过 store 实例的 subscribe 方法订阅数据的变化
    // 回调函数可以在每次 state 发生变化的时候自动执行
    store.subscribe(() => {
      console.log('state 变化了 ', store.getState())
      // 5. 通过 store 实例的 getState 方法获取最新状态更新到视图中
      countEle.innerText = store.getState().count
    })

    // 4. 通过 store 实例的 dispatch 方法提交 action 更改状态
    const inBtn = document.getElementById('increment')
    inBtn.addEventListener('click', () => {
      // 增
      store.dispatch({ type: 'INCREMENT' })
    })

    const dBtn = document.getElementById('decrement')
    dBtn.addEventListener('click', () => {
      // 减
      store.dispatch({ type: 'DECREMENT' })
    })
  </script>
</body>
</html>